<template>
    <view class="u-p-t-22">
		{{form_data}}
        <view class="item">
            <view class="bottom-border flex-c-s">
                <view class="left">姓名</view>
                <view class="flex-c" style="flex: 1">
                    <u-input v-model="form_data.name" placeholder="请输入" fontSize="30rpx" placeholderStyle="font-size: 36rpx" border="none" clearable></u-input>
                </view>
            </view>
            <!--  <view class="bottom-border flex-c-s">
                <view class="left">联系方式</view>
                <view class="flex-c" style="flex: 1">
                    <u-input type="number" v-model="form_data.mobile" placeholder="请输入" fontSize="30rpx" placeholderStyle="font-size: 28rpx" border="none" clearable></u-input>
                </view>
            </view> -->
            <view class="bottom-border flex-c-s">
                <view class="left">年龄</view>
                <view class="flex-c" style="flex: 1">
                    <u-input type="number" v-model="form_data.age" placeholder="请输入" fontSize="30rpx" placeholderStyle="font-size: 36rpx" border="none" clearable></u-input>
                </view>
            </view>
            <view class="bottom-border flex-c-s">
                <view class="left">性别</view>
                <view class="flex-c" style="flex: 1; font-size: 36rpx" @click="form_data.sex == '男' ? (form_data.sex = '女') : (form_data.sex = '男')">{{ form_data.sex }} ></view>
            </view>
            <view class="bottom-border flex-c-s">
                <view class="left">健康证</view>

                <view class="flex-c" style="justify-content: flex-start; flex: 1">
                    <picker mode="date" :value="form_data.begintime" :end="$u.timeFormat(new Date().getTime(), 'yyyy-mm-dd')"   @change="(e)=>form_data.begintime=e.detail.value">
                        <text v-if="form_data.begintime" class="flex-c" style="flex: 1; font-size: 36rpx">{{ form_data.begintime }} ></text>
                        <text v-else class="" style="font-size: 36rpx; text-align: left">请选择健康证开始时间 ></text>
                    </picker>
                </view>
            </view>
        </view>
        <view style="background-color: white; padding-top: 30rpx">
            <view class="title u-m-b-16 u-m-l-24">身份证正面</view>
            <view class="view-2 flex-c-s flex-d-c">
                <image @click="fangda(form_data.faceimage)" v-if="form_data.faceimage" class="image-3" :src="form_data.faceimage" mode="widthFix"></image>
                <image v-else class="image-3" src="/static/base/zhaoxiangji.png" mode="widthFix"></image>
                <view class="take-photo flex-c-c" @click="btnUpload('image', 'faceimage')">拍照上传</view>
            </view>
        </view>
        <view style="background-color: white; padding-top: 30rpx">
            <view class="title u-m-b-16 u-m-l-24">身份证返面</view>
            <view class="view-2 flex-c-s flex-d-c">
                <image @click="fangda(form_data.backimage)" v-if="form_data.backimage" class="image-3" :src="form_data.backimage" mode="widthFix"></image>
                <image v-else class="image-3" src="/static/base/zhaoxiangji.png" mode="widthFix"></image>
                <view class="take-photo flex-c-c" @click="btnUpload('image', 'backimage')">拍照上传</view>
            </view>
        </view>
        <view style="background-color: white; padding-top: 30rpx">
            <view class="title u-m-b-16 u-m-l-24">健康证</view>
            <view class="view-2 flex-c-s flex-d-c">
                <image @click="fangda(form_data.healthimage)" v-if="form_data.healthimage" class="image-3" :src="form_data.healthimage" mode="widthFix"></image>
                <image v-else class="image-3" src="/static/base/zhaoxiangji.png" mode="widthFix"></image>
                <view class="take-photo flex-c-c" @click="btnUpload('image', 'healthimage')">拍照上传</view>
            </view>
        </view>
        <u-gap height="300rpx"></u-gap>
        <view class="bottom-list2">
            <!-- <view class="flex-c-c tijiao u-m-b-30" style="background-color: #999" v-if="status == 'hidden'">更改录入</view> -->
            <view class="flex-c-c tijiao u-m-b-30" @click="submit">确定</view>
            <view class="flex-c-c xiyi" style="" @click="is_reading = !is_reading">
                <view class="is-checkout" v-if="is_reading"></view>
                <view v-else class="no-checkout"></view>
                <text style="color: #979997; margin-left: 10rpx">我已阅读并同意</text>
                <text :style="{ color: $main_color }" @click.stop="$u.route(`/pages/article?id=3&name=用户协议`)">《用户协议》</text>
                <text >和</text>
                <text :style="{ color: $main_color }" @click.stop="$u.route(`/pages/article?id=5&name=隐私协议`)">《隐私协议》</text>
                <text >和</text>
                <text :style="{ color: $main_color }" @click.stop="$u.route(`/pages/article?id=6&name=使用协议`)">《使用协议》</text>
            </view>
        </view>
    </view>
</template>

<script setup>
import { reactive, ref, computed } from 'vue';
let { name, age, sex, backimage, faceimage, healthimage, status, begintime='' } = uni.$store('data').userInfo;
sex = sex || '男';
const form_data = reactive({
    name,
    age,
    sex,
    faceimage,
    backimage,
    healthimage,
    begintime
});
// const form_data = reactive({
//     age: '30',
//     backimage: 'http://zhaopin.hgyzkj.cn/uploads/20250529/55c647b7b6a40651a470f7fb1fddf637.png',
//     faceimage: 'http://zhaopin.hgyzkj.cn/uploads/20250529/428ba286f6d1ccf97261db649bb8df01.jpeg',
//     healthimage: 'http://zhaopin.hgyzkj.cn/uploads/20250529/55c647b7b6a40651a470f7fb1fddf637.png',
//     // mobile: '18345159661',
//     name: '王猛',
//     sex: '女'
// });

const is_reading = ref(false);

const fangda = (path) => {
    uni.previewImage({
        current: path,
        urls: [path]
    });
};
const btnUpload = async (type, index) => {
    if (type == 'image') {
        uni.chooseImage({
            count: 1,
            success: async (res) => {
                let { data } = await uni.$uploadImg(res.tempFiles[0].path);
                form_data[index] = data.fullurl;
            },
            fail(err) {}
        });
    }
};
const submit = () => {
    for (let i in form_data) {
        if (!form_data[i]) return uni.$u.toast('请填写完整信息');
    }
    if (!is_reading.value) return uni.$u.toast('请阅读协议!');
    // if (!uni.$u.test.mobile(form_data.mobile)) return uni.$u.toast('手机号格式不正确');

    uni.showModal({
        title: '请确认信息填写正确',
        content: '提交后无法修改',
        showCancel: true,
        cancelText: '修改',
        confirmText: '提交',
        success: (res) => {
            uni.$u.http
                .post('/user/updInfo', {
                    ...form_data
                })
                .then((res) => {
                    uni.$u.toast(res.msg);
                    setTimeout(() =>
                        uni.$u.route({
                            url: '/pages/tabbar/mine',
                            type: 'switchTab'
                        })
                    );
                });
        }
    });
};
</script>

<style scoped lang="scss">
.title {
    font-family: PingFang SC, PingFang SC;
    font-weight: 600;
    font-size: 32rpx;
    color: #000000;
    line-height: 38rpx;
}

.view-2 {
    width: 702rpx;
    background: #ffffff;
    border-radius: 24rpx 24rpx 24rpx 24rpx;
    margin: 0 auto;
    padding: 34rpx 24rpx;
    margin-bottom: 30rpx;

    .text-3 {
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        font-size: 24rpx;
        color: #999999;
        line-height: 28rpx;
    }

    .image-3 {
        width: 96rpx;
        height: 96rpx;
    }

    .take-photo {
        width: 288rpx;
        height: 68rpx;
        border-radius: 48rpx 48rpx 48rpx 48rpx;
        border: 2rpx solid $main_color;

        font-size: 28rpx;
        color: $main_color;
        line-height: 33rpx;
        margin-top: 22rpx;
    }
}

.item {
    width: 100%;
    margin: 0 auto;
    background: #ffffff;
    margin-bottom: 20rpx;

    & > view {
        height: 114rpx;
        padding: 0 28rpx;
    }

    .bottom-border {
        border-bottom: 2rpx dashed #f1f1f1;
    }

    .left {
        font-size: 36rpx;
        width: 180rpx;
        color: #000000;
    }

    .right {
        font-size: 36rpx;
        color: #999999;
    }

    .yan-zheng-ma {
        width: 160rpx;
        height: 48rpx;
        background: $main_color;
        border-radius: 12rpx 12rpx 12rpx 12rpx;
        margin-left: 24rpx;

        font-size: 36rpx;
        color: #ffffff;
    }
}

.bottom-list2 {
    width: 750rpx;
    padding: 30rpx 0 60rpx;
    position: fixed;
    bottom: 0;
    background-color: white;
    padding-top: 18rpx;

    .xiyi {
        font-size: 24rpx;
    }

    .tijiao {
        width: 702rpx;
        margin: 0 auto;
        height: 80rpx;
        background: $bg_color;
        border-radius: 44rpx 44rpx 44rpx 44rpx;
        font-size: 32rpx;
        color: white;
    }
}
</style>
